<template>
  <a-card title="用户列表">
    <a-table :dataSource="dataSource" :columns="columns" bordered>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'gender'">
          {{ column.options[record.gender] }}
        </template>
        <template v-else-if="column.key === 'role'">
          {{ column.options[record.role] }}
        </template>

        <template v-if="column.key === 'avatar'">
          <a-image v-if="record.avatar" :src="record.avatar" :width="88" />
        </template>
        <template v-else-if="column.key === 'action'">
          <span>
            <a @click="handelEdit(record._id)">编辑</a>
            <a-divider type="vertical" />
            <a @click="handleDelete(record._id)">删除</a>
          </span>
        </template>
      </template>
    </a-table>

    <a-modal
      v-model:open="open"
      title="编辑"
      @ok="handleOk"
      @cancel="handelCancel"
      okText="确定"
      cancelText="取消"
    >
      <a-form
        ref="formRef"
        :model="formState"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        autocomplete="off"
      >
        <a-form-item
          label="用户名"
          name="username"
          :rules="[{ required: true, message: 'Please input your username!' }]"
        >
          <a-input v-model:value="formState.username" disabled />
        </a-form-item>
        <a-form-item
          label="密码"
          name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]"
        >
          <a-input-password v-model:value="formState.password" />
        </a-form-item>
        <a-form-item label="角色" name="role" :rules="[{ required: true }]">
          <a-select v-model:value="formState.role">
            <a-select-option :value="1">管理员</a-select-option>
            <a-select-option :value="2">编辑者</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="简介" name="introduction">
          <a-textarea
            v-model:value="formState.introduction"
            placeholder="请输入"
            allow-clear
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getUserList, Delete, Edit, findById } from "@/api/user";
import { message } from "ant-design-vue";
const columns = [
  {
    title: "用户名",
    dataIndex: "username",
    key: "username",
  },
  {
    title: "性别",
    dataIndex: "gender",
    key: "gender",
    options: {
      0: "保密",
      1: "男",
      2: "女",
    },
  },
  {
    title: "简介",
    dataIndex: "introduction",
    key: "introduction",
  },
  {
    title: "头像",
    dataIndex: "avatar",
    key: "avatar",
  },
  {
    title: "角色",
    dataIndex: "role",
    key: "role",
    options: {
      1: "管理员",
      2: "编辑者",
    },
  },
  {
    title: "操作",
    key: "action",
  },
];
const dataSource = ref([]);

const open = ref(false);

const formRef = ref();

const formState = ref({
  username: "",
  password: "",
  role: 1,
  introduction: "",
});

const getUserListFun = async () => {
  const { success, data, msg, code } = await getUserList();
  if (success) {
    dataSource.value = data || [];
    message.success(msg);
  } else {
    dataSource.value = [];
    message.error(msg);
  }
};

onMounted(() => {
  getUserListFun();
});

// 删除角色
const handleDelete = async (_id) => {
  const { success, msg, code } = await Delete({ _id });
  if (success) {
    message.success(msg);
    getUserListFun();
  } else {
    message.error(msg);
  }
};

// 编辑
const handelEdit = async (_id) => {
  const { success, msg, data } = await findById({ _id });
  if (success) {
    formState.value = data;
    open.value = true;
  } else {
    message.error(msg);
  }
};

// 确定编辑
const handleOk = async () => {
  formRef.value.validate().then(async (values) => {
    const { success, msg, code } = await Edit({
      ...values,
      _id: formState.value._id,
    });
    if (success) {
      message.success(msg);
      open.value = false;
      getUserListFun();
    } else {
      message.error(msg);
    }
  });
};
// 取消
const handelCancel = () => {
  open.value = false;
  formState.value = {};
};
</script>
